<template>
  <div>
<h2>门店列表</h2>
<input type="button" value="添加" class="btn btn-success" @click="add">
<hr/>
<div>
  门店名称:<input type="text" v-model="model.shopName">

  <input type="button" value="查询" class="btn btn-success" @click="getlist">
  <input type="button"  value="批量删除"  class="btn btn-danger"  @click="delAll"/>
  
  <input type="button"  value="批量上架"  class="btn btn-info"   @click="upOrDown(1)"/>
  <input type="button"  value="批量下架"  class="btn btn-danger"   @click="upOrDown(0)" />
  <input type="button" value="导出" class="btn btn-warning" @click="exportFn"/>
      <input type="button" value="导入" class="btn btn-warning" />

</div>
<table class="table table-bordered">
    <tbody>
      <tr class="bg-primary">
        <td> <input type="checkbox" v-model="checked" @click="allCheck" />  </td>
        <td>Id</td>
        <td>门店名称</td>
        <td>门店电话</td>
        <td>地址</td>
        <td>图片 </td>
        <td>状态</td>
        <td>操作</td>
      </tr> 
      <tr  v-for="item in data.list":key="item.Id">
        <td> <input   type="checkbox"  :value="item.Id"  v-model="ids"  @change="oneCheck"  /></td>
        <td>{{ item.Id }}</td>
        <td>{{ item.ShopName }}</td>
        <td>{{ item.Phone }}</td>
        <td>{{ item.Adderss }}</td>
        <td><img :src="item.Photo" width="100" height="100"></td>
        <td>{{item.State==1?"开启":"关闭"}}</td>
        <td>
          <input type="button" value="删除" class="btn btn-danger" @click="delOne(item.Id)">
          <input type="button" value="修改" class="btn btn-success" @click="Update(item.Id)">
          <input type="button" value="关闭" v-if="item.State==1" class="btn btn-info" >
          <input type="button" value="开始" v-if="item.State==0" class="btn btn-info" >
        </td>
      </tr> 
  </tbody>
  </table>
  <span>总条数:{{data.count}}</span>
  <span>总页数:{{data.page}}</span>
  <span>当前:{{model.Index+'/'+  data.page}}页</span>
  <div>
      <input type="button" value="首页" @click="gopage('a')">
      <input type="button" value="上一页" @click="gopage('b')">
      <input type="button" value="下一页" @click="gopage('c')">
      <input type="button" value="尾页" @click="gopage('d')">
      <input type="number" v-model="page">
      <input type="button" value="跳转" @click="gopage(page)">
  </div>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';

//导出
const exportFn=()=>{
location.href=`https://localhost:7291/api/Shop/ExportExecl?shopName=${model.shopName}&index=${model.Index}&size=${model.size}`;
}

//修改
const Update=(Id:any)=>{

  //跳转
  router.push({

    path:'/ShopUpdate',
    query:{
      Id:Id,
    }

  });
  
};


//储存全选之后的id
let ids=ref([]);
//声明变量设置全选与全不选的按钮选中与不选中
let checked=ref(false);
//批量上架或者下架
const upOrDown = (state: any) => {
  //1.提示必选一项
  if (ids.value.length == 0) {
    alert('必选一项');
    return;
  }
  //2.发送网络请求改状态（ids  state）
  axios({
    url: '/api/Shop/UpOrDownAllShowItem',
    method: 'put',
    params: {
      ids: ids.value.toString(),
      state: state,
    },
  })
    .then((res) => {
      console.log(res);
      if (res.data == 1) {
        alert('修改状态成功');
        checked.value = false;
        ids.value = [];
        getlist();
      } else {
        alert('修改状态失败');
        return;
      }
    })
    .catch((err) => {
      console.log(err);
    });
};

//单个删除
const delOne = (id: any) => {
  //1.提示信息
  let f = confirm('请问您确定要删除吗？');
  if (f) {
    //2.发送网络请求时行删除
    axios({
      url: '/api/Shop/DelAllShopItem',
      method: 'delete',
      params: {
        ids: id,
      },
    })
      .then((res) => {
        console.log(res);
        if (res.data == 1) {
          alert('删除成功');
          getlist();
        } else {
          alert('删除失败');
          return;
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }
};

//批量删除(传ids)
const delAll = () => {
  //1.提示必选一项？
  if (ids.value.length <= 0) {
    alert('必选一项');
    return;
  }
  //2.提示确定要删除吗？
  var f = confirm('请问确定要删除吗?');
  if (f) {
    //3.发送网络请求进行删除操作   ids.value  传后端口
    axios({
      url: '/api/Shop/DelAllShopItem',
      method: 'delete',
      params: {
        ids: ids.value.toString(),
      },
    })
      .then((res) => {
        console.log(res);
        if (res.data == 1) {
          alert('删除成功');
          checked.value = false;
          getlist();
        } else {
          alert('删除失败');
          return;
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }
};

//单个被选中
const oneCheck = () => {
  //思路：ids长度和data.list的长度相同  checked为true否则为false
  if (ids.value.length == data.list.length) {
    checked.value = true;
  } else {
    checked.value = false;
  }
};

//全选与全不选
const allCheck = () => {
  checked.value = !checked.value;

  if (checked.value == true) {
    ids.value = data.list.map((item: any) => {
      return item.Id;
    }); //作用就将data.list中的所有Id放到 ids中  map是循环的意思
  } else {
    ids.value = []; //将ids数组置空
  }
};



onMounted(()=>{ 
  getlist();
})

//实现分页
const gopage = (str: any) => {
switch (str) {
  case 'a':
    if (model.Index == 1) {
     
      return;
    }
    model.Index = 1;
    break;
    case 'b':
    if (model.Index == 1) {
  
      return;
    }
    model.Index--;
    break;
  case 'c':
    //页码+1  到最后一页不能再加了
    if (model.Index == data.page) {
   
      return;
    }
    model.Index++;
    break;
  case 'd':
    if (model.Index == data.page) {
     
      return;
    }
    model.Index = data.page;
    break;
    case str:
      //1 非空  2 小于总页数
      if(str==''){
        alert('页数不能为空');
        return;
      }
      if(str<0||str>data.page){
        alert('页数不能小于0,不能大于'+data.page);
        return;
      }
      model.Index=str;
    break;
}
getlist();
page.value=model.Index;
};

//现实跳转传参
const router=useRouter();
//跳转到添加页面
const add=()=>{
router.push("/shopAdd")//跳转到权益添加页面
}

let model=reactive({
shopName:'',
Index:1,
size:2,
})



//接受后端的数据
let data=reactive({
list:[],
count:0,
page:0,
})

//声明变量跳转到第几页
let page=ref(1);

//列表
const getlist=()=>{
axios({
url:'/api/Shop/GetShopList',
method:'get',
params:model,
})

.then((res)=>{
  console.log(res);
  data.list=res.data.list;
  data.count=res.data.count;
  data.page=res.data.page;
})

.catch((ree)=>{
  console.log(ree);
})

}

</script>

<style scoped>

</style>